<template>
  <div>
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item name="isLocal" class="w-[300px]">
          <a-radio-group v-model:value="formState.isLocal">
            <a-radio value="">全部</a-radio>
            <a-radio value="1">本舰</a-radio>
            <a-radio value="0">外来</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item name="isOnShip">
          <a-radio-group v-model:value="formState.isOnShip">
            <a-radio value="">全部</a-radio>
            <a-radio value="1">在舰</a-radio>
            <a-radio value="0">离舰</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex">
        <a-button class="mb-2" type="primary" @click="onEditOpen"> 新增 </a-button>
        <a-button class="ml-2"> 导出 </a-button>
      </div>
      <div class="flex items-center">
        <div class="w-1/2 pr-10">
          <BaseTable fill :data-source="tableData" :loading="loading" column-code="000695" :pagination="pagination">
            <template #bodyCell="{ column, index }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
            </template>
          </BaseTable>
        </div>
        <div class="w-1/2 pl-5">
          <div id="dom2" class="h-[500px]"><a-empty class="pt-8" /></div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
// import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import echarts from '@/utils/echarts'

const formChart = ref({})
const formRef = ref(null)
const formState = ref({
  isLocal: '',
  isOnShip: ''
})

const { loading, tableData, pagination, getData } = useTable({
  url: '/war/epidemicStatistics/getEpidemicRegistrationStatisticsResponse',
  immediate: true,
  params: formState.value,
  formatResult: (result) => {
    formChart.value = result
    initRegisterChart2()
    return result?.vaccinStatisticsResponseList
  }
})

const initRegisterChart2 = async () => {
  const { code, data = [], msg } = await post('/statistic/revenue')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  let countAll = 0
  formChart.value.vaccinStatisticsResponseList.forEach((x) => (countAll += x.vaccinNumberCount))
  const registerDom = document.getElementById('dom2')
  if (!registerDom) return
  const registerChart = echarts.init(registerDom)
  registerChart.setOption({
    xAxis: {
      type: 'category',
      data: ['在舰', '本舰', '外来', '接种1针'],
      axisTick: { show: false },
      axisLine: { show: false }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      // name: '（人）',
      nameTextStyle: { color: '#aaa' },
      type: 'value',
      axisLabel: { color: '#aaa' },
      axisLine: { show: false },
      splitLine: { show: true, lineStyle: { type: 'dashed' } },
      min: 0, // 设置Y轴最小值
      max: countAll // 设置Y轴最大值，您可以根据数据调整此值
    },
    series: [
      {
        data: [formChart.value.onShipCount, formChart.value.localCount, formChart.value.nonLocalCount, formChart.value.highRiskCount],
        type: 'bar',
        name: '数量',
        barWidth: 50,
        itemStyle: {
          barBorderRadius: [4, 4, 4, 4], //柱形图圆角
          color: '#5F79F4'
        }
      }
    ]
  })
}
</script>
